<template>
   <el-dialog :title="title" :visible = "showDialog" width="30%" @close="close">
     <el-form class="info" label-width="100px" :model="formModel" :rules="rules" ref="info"> 
        <el-form-item label="部门名称" style="width: 80%;" prop="name">
            <el-input placeholder="请输入部门名称，2-10个字符" size="mini" v-model="formModel.name"></el-input>
        </el-form-item>
        <el-form-item label="部门编码" style="width: 80%;" prop="code">
            <el-input placeholder="请输入部门编码，2-10个字符" size="mini" v-model="formModel.code"></el-input>
        </el-form-item>
        <el-form-item label="部门负责人" size="mini" prop="managerId">
            <el-select placeholder="部门负责人" v-model="formModel.managerId" >
              <el-option v-for="item in personList" :key="item.id" :value="item.id" :label="item.username"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="部门介绍" style="width: 80%;" prop="introduce">
            <el-input type="textarea" rows="4" v-model="formModel.introduce"></el-input>
        </el-form-item>
         <el-form-item  style="width: 100%;">
            <el-row style="width: 100%;" type="flex" justify="end" align="middle">
               <el-col :span="12">
                <el-button type="primary" size="mini" @click="isOk">确认</el-button>
                <el-button size="mini" @click="close">取消</el-button>
               </el-col>
            </el-row>
        </el-form-item>
     </el-form>
   </el-dialog>
</template>

<script>
import { getDepartSerice } from '@/api/department'
import { getPersonService, } from '@/api/department';
import { getNewDeptService, getDetailsService, getModifyService } from '@/api/department'
import { Message } from 'element-ui';
export default {
  data(){
    return {
      formModel: {
        code: '',
        introduce: '',
        managerId: '',
        name: '',
        pid:''
      },
      rules: {
        // 部门名称校验
         name: [
           { required: true, message: '请输入部门名称', trigger: 'blur' }, 
           { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
           {
            trigger: 'blur',
            validator: async(rules, value ,callback) =>{
              let res = await getDepartSerice()
              // 如果this.formModel.id 存在说明是 编辑 ，在编辑的情况下，要排除自身
              if(this.formModel.id){
                // 遍历数组中的每一项，传过来的formModel中的id如果不等于遍历出的id则返回一个新数组
                res = res.filter(item => item.id !== this.formModel.id)
              }
              if(res.some(item => item.name === value)){
                 callback(new Error('该部门已经存在'))
              }else {
                 callback()
              }
            }
           }
          ],
        // 部门编码校验
        code: [
          { required: true, message: '请输入部门编码', trigger: 'blur' }, 
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
          {
            trigger: 'blur',
            validator: async(rules, value ,callback) =>{
              let res = await getDepartSerice()
              // 如果this.formModel.id 存在说明是 编辑 ，在编辑的情况下，要排除自身
              if(this.formModel.id){
                // 遍历数组中的每一项，传过来的formModel中的id如果不等于遍历出的id则返回一个新数组
                res = res.filter(item => item.id !== this.formModel.id)
              }
              if(res.some(item => item.code === value)){
                 callback(new Error('该编码已经存在'))
              }else {
                 callback()
              }
            }
           }
        ],
        // 负责人名称
        managerId: [
          { required: true, message: '请选择部门负责人', trigger: 'blur' }, 
        ],
        // 部门介绍
        introduce: [
          { required: true, message: '请输入内容', trigger: 'blur' }, 
        ]
        
      },
      personList:[]
    }
  },
 props:{
    showDialog: {
      type: Boolean,
      default: false
    },
    currentNodeId: {
      type: Number,
      default: null
    },
    title: {
      type: String,
      default: '无数具'
    }
 },
 created() {
  this.getPerson()
 },
 methods: { 
    close(){
        this.formModel = {
          code: '',
          introduce: '',
          managerId: '',
          name: '',
          pid:''
        }
        this.$emit('changeShow')
    },
  async getPerson() {
   const list = await getPersonService()
   this.personList = list
  },
  async isOk(){
    await this.$refs.info.validate()//登录前表单与校验
    // 如果有id说明是编辑
    let msg = '添加'
    if(this.formModel.id){
      await getModifyService(this.formModel)
      msg = '编辑'
    }else {
      await getNewDeptService({...this.formModel, pid: this.currentNodeId})//发送添加的请求
    }
    this.$emit('updataDept') //子传父，通知父组件重新渲染页面
    this.$refs.info.resetFields() //重置表单
    this.close() //点击确认关闭弹层
    Message({ type: 'success', message: `${msg}部门成功` }) //消息提示，添加成功
  },
   async getExit() {
      const res = await getDetailsService(this.currentNodeId)
      this.formModel = res
  }
 }
}
</script>

<style lang="scss" scoped>
.info{
  display: flex;
  flex-direction: column; 
  align-items: center;
}
</style>
